<template>
  <view class="flex-col page">
    <!-- <view class="flex-col justify-start section">
      <view class="flex-col justify-start items-center text-wrapper"><text class="font text">中华（硬）</text></view>
    </view> -->
    <u-navbar :title="title" :autoBack="true" bgColor="#fff" placeholder="false"></u-navbar>
    <view class="flex-col group">
      <view class="flex-col justify-start items-center text-wrapper_2"><text class="font_2 text">生成海报</text></view>
    </view>

    <image class="shrink-0 image image_100" :src="$util.img(item.image)" mode="aspectFit" />

    <view class="flex-col group">
      <view class="flex-col section_3">
        <view class="flex-row justify-between self-stretch">
          <view class="flex-row self-start">
            <view class="shrink-0 section_4"></view>
            <text class="font text ml-9">{{ item.name }}</text>
          </view>
          <view class="flex-col justify-start items-center text-wrapper_3" @click="gz"><text
              class="font_2 text">关注</text></view>
        </view>
        <view class="flex-row items-baseline self-stretch group_2">
          <text class="font_4 text">批发价：</text>
          <text class="font_3 text ml-1-5" v-if="item.pf_price == 0">暂无</text>
          <text class="font_3 text ml-1-5" v-else>￥{{ item.pf_price }}</text>
        </view>
        <view class="flex-row justify-between equal-division group_3">
          <view class="flex-row items-baseline">
            <text class="font_4 text">行情价：</text>
            <text class="font_3 text ml-1-5" v-if="item.hq_price == 0">暂无</text>
            <text class="font_3 text ml-1-5" v-else>￥{{ item.hq_price }}</text>
          </view>
          <view class="flex-row items-baseline">
            <text class="font_4 text">指导价：</text>
            <text class="font_3 text text_2 ml-1-5" v-if="item.zd_price == 0">暂无</text>
            <text class="font_3 text text_2 ml-1-5" v-else>￥{{ item.zd_price }}</text>
          </view>
        </view>
      </view>
      <view class="mt-8 flex-col section_3">
        <view class="flex-row justify-between items-center">
          <view class="flex-row">
            <view class="shrink-0 section_4"></view>
            <text class="font_5 text ml-9-5">历史行情</text>
          </view>
          <view class="flex-row">
            <view class="flex-col justify-start items-center "
              :class="date_type == 1 ? 'text-wrapper_4' : 'text-wrapper_5'" @click="dateChange(1)">
              <text class="font_6 text text_3">7天</text>
            </view>
            <view class="flex-col justify-start items-center  ml-10-5"
              :class="date_type == 2 ? 'text-wrapper_4' : 'text-wrapper_5'" @click="dateChange(2)">
              <text class="font_6 text text_3">30天</text>
            </view>
            <view class="flex-col justify-start items-center  ml-10-5"
              :class="date_type == 3 ? 'text-wrapper_4' : 'text-wrapper_5'" @click="dateChange(3)">
              <text class="font_6 text text_3">90天</text>
            </view>
            <view class="flex-col justify-start items-center  ml-10-5"
              :class="date_type == 4 ? 'text-wrapper_4' : 'text-wrapper_5'" @click="dateChange(4)">
              <text class="font_6 text text_3">1年</text>
            </view>
            <view class="flex-col justify-start items-center  ml-10-5"
              :class="date_type == 5 ? 'text-wrapper_4' : 'text-wrapper_5'" @click="dateChange(5)">
              <text class="font_6 text text_3">3年</text>
            </view>
          </view>
        </view>
        <uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas"
          :ec="ec"></uni-ec-canvas>
        <!-- <image
          class="image mt-14-5"
          src="http://ts.ysgzt.cn/static/images/wechat/resources/5cfd67559edfc2d3bb710aa677e30c19.png"
        /> -->
      </view>
      <view class="mt-8 flex-col section_5">
        <view class="flex-row group_4">
          <view class="section_4"></view>
          <text class="font_5 text text_8 ml-9-5">每日行情</text>
        </view>
        <view class="flex-row justify-between group_4 view">
          <text class="font_7 text text_9">日期</text>
          <text class="font_7 text text_10">当日价格</text>
          <text class="font_7 text text_11">涨跌幅</text>
        </view>
        <view class="flex-row justify-center items-center relative group_5 view_2" v-for="(items, index) in list">
          <!-- <text class="font_8 text pos">2025-02-07</text> -->
          <text class="font_8 text pos">{{ items.date }}</text>

          <text class="font_9 text" v-if="items.type == 1">{{ items.price }}</text>
          <text class="font_10 text" v-if="items.type == 2">{{ items.price }}</text>

          <view class="flex-row pos_2">
            <image class="shrink-0 image_2" v-if="items.type == 1"
              src="https://www.dlxx.top/static/images/322f6f1bfba3e5ec7a20a8e906ea1060.png" />
            <image class="shrink-0 image_3" v-if="items.type == 2"
              src="https://www.dlxx.top/static/images/b8648e7e42bc7f1191ac8107348f7064.png" />
            <text class="font_9 text ml-3-5" v-if="items.type == 1">{{ items.fd }}</text>
            <text class="font_10 text ml-3-5" v-if="items.type == 2">{{ items.fd }}</text>
          </view>

        </view>


      </view>
    </view>
  </view>
</template>

<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts'
let chart = null
export default {

  components: {
    uniEcCanvas
  },
  props: {},
  data() {
    return {
      id: '',
      title: '',
      userInfo: [],
      item: {},
      date_type: 1,
      dates: ['2025.02.01', '2025.02.02', '2025.02.03'],
      datas: ['11', '12', '13'],
      list: [],
      ec: {
        lazyLoad: true
      },
      option: {
        title: {
          text: ''
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
        },
        grid: {
          top: '15',
          left: "10",
          right: "25",
          bottom: "10",
          show: false,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.dates,
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            rotate: 0,
            textStyle: {
              color: '#999999'
            }
          },
          axisLine: {
            lineStyle: {
              type: 'dashed',
              color: '#e1e1e1'
            }
          },
          boundaryGap: false,
        },
        yAxis: {
          axisLabel: {
            rotate: 0,
            textStyle: {
              color: '#999999'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              type: 'dashed',
              color: '#e1e1e1'
            }
          },
          splitLine: {
            show: false
          }

        },
        series: [{
          name: '烟价',
          type: 'line',
          areaStyle: {

          },
          itemStyle: {
            normal: {
              color: '#00806b70',
            },
          },
          symbol: 'none', //去掉折线图中的节点
          smooth: true, //true 为平滑曲线，false为直线
          data: this.datas,
        }]
      }
    };
  },
  onLoad(options) {
    console.log(options)
    this.id = options.id;
    this.title = options.title;
    this.userInfo = uni.getStorageSync('userInfo');
    this.getInfo();

  },
  onUnload() {
    chart = null
  },
  methods: {
    gz() {
      this.$api.sendRequest({
        url: '/api/index/collect',
        data: {
          id: this.id,
          user_id: this.userInfo.id
        },
        success: res => {
          if (res.code == 1) {
            this.item.is_collect = 1;
            this.$util.showToast({
              title: '关注成功'
            });
          } else {
            this.$util.showToast({
              title: '操作失败，请重试'
            });
          }
        }
      });
    },
    qxgz() {
      this.$api.sendRequest({
        url: '/api/index/uncollect',
        data: {
          id: this.id,
          user_id: this.userInfo.id
        },
        success: res => {
          if (res.code == 1) {
            this.item.is_collect = 0;
            this.$util.showToast({
              title: '取消成功'
            });
          } else {
            this.$util.showToast({
              title: '操作失败，请重试'
            });
          }
        }
      });
    },
    initChart(canvas, width, height, canvasDpr) {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: canvasDpr
      })
      canvas.setChart(chart)
      chart.setOption(this.option)
      return chart
    },
    dateChange(type) {
      uni.showLoading({
        title: '加载中'
      })
      this.date_type = type;
      this.getInfo();
      uni.hideLoading();
    },
    getInfo() {
      this.$api.sendRequest({
        url: '/api/index/getYanInfo',
        data: {
          id: this.id,
          type: this.date_type
        },
        success: res => {
          if (res.code == 1) {
            this.item = res.data;
            this.list = res.data.list;
            this.dates = res.data.date;
            this.datas = res.data.data;
            this.option = {
              title: {
                text: ''
              },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                },
              },
              grid: {
                top: '15',
                left: "20",
                right: "30",
                bottom: "10",
                show: false,
                containLabel: true,
              },
              xAxis: {
                type: "category",
                data: this.dates,
                axisTick: {
                  alignWithLabel: true,
                },
                axisLabel: {
                  rotate: 0,
                  textStyle: {
                    color: '#999999'
                  }
                },
                axisLine: {
                  lineStyle: {
                    type: 'dashed',
                    color: '#e1e1e1'
                  }
                },
                boundaryGap: false,
              },
              yAxis: {
                axisLabel: {
                  rotate: 0,
                  textStyle: {
                    color: '#999999'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    type: 'dashed',
                    color: '#e1e1e1'
                  }
                },
                splitLine: {
                  show: false
                }

              },
              series: [{
                name: '烟价',
                type: 'line',
                areaStyle: {

                },
                itemStyle: {
                  normal: {
                    color: '#00806b70',
                  },
                },
                symbol: 'none', //去掉折线图中的节点
                smooth: true, //true 为平滑曲线，false为直线
                data: this.datas,
              }]
            }

            this.$refs.canvas.init(this.initChart)
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.uni-ec-canvas {
  width: 100%;
  height: 400rpx;
}

.ml-10-5 {
  margin-left: 21rpx;
}

.mt-14-5 {
  margin-top: 29rpx;
}

.ml-3-5 {
  margin-left: 7rpx;
}

.ml-9-5 {
  margin-left: 19rpx;
}

.ml-1-5 {
  margin-left: 3rpx;
}

.ml-9 {
  margin-left: 18rpx;
}

.ml-5 {
  margin-left: 10rpx;
}

.page {
  background-color: #00000000;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;

  .section {
    padding: 34rpx 0 10rpx;
    background-color: #ffffff;

    .text-wrapper {
      margin-left: 32rpx;
      margin-right: 10rpx;
      padding: 96rpx 0 17rpx;
      background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/05e0093ead41b70437e3214e578e2e5a.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }

  .section_2 {
    margin-top: 12rpx;

    /*padding: 47rpx 0 305rpx;
      background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/091a7d2b47c1a045b7339d0e02759320.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;*/
    .text-wrapper_2 {
      margin-right: 34rpx;
      padding: 12rpx 0;
      background-color: #00806b;
      border-radius: 24rpx;
      width: 128rpx;
    }
  }

  .text {
    text-transform: uppercase;
  }

  .group {
    padding: 16rpx 10rpx 0;

    .section_3 {
      padding: 32rpx 24rpx;
      background-color: #ffffff;
      border-radius: 10rpx;

      .text-wrapper_3 {
        padding: 12rpx 0;
        background-color: #00806b;
        border-radius: 24rpx;
        width: 128rpx;
        height: 48rpx;
      }

      .group_2 {
        margin-top: 16rpx;
        padding: 0 25rpx;
      }

      .equal-division {
        align-self: flex-start;
        margin-left: 24rpx;
        margin-top: 38rpx;

        .text_2 {
          color: #b01431;
        }
      }

      .group_3 {
        width: 538rpx;
      }

      .font_4 {
        font-size: 24rpx;
        font-family: PingFangSC;
        line-height: 23rpx;
        color: #999999;
      }

      .font_3 {
        font-size: 32rpx;
        font-family: PingFangSC;
        line-height: 26rpx;
        color: #011613;
      }

      .text-wrapper_4 {
        padding: 4rpx 0;
        background-color: #00806b;
        border-radius: 4rpx;
        width: 58rpx;
        height: 30rpx;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;

        .text_3 {
          color: #ffffff;
          line-height: 18rpx;
        }
      }

      .text-wrapper_5 {
        padding: 4rpx 0;
        background-color: #eeeeee;
        border-radius: 4rpx;
        width: 58rpx;
        height: 30rpx;
        border-left: solid 1rpx #eeeeee;
        border-right: solid 1rpx #eeeeee;
        border-top: solid 1rpx #eeeeee;
        border-bottom: solid 1rpx #eeeeee;

        .text_4 {
          line-height: 18rpx;
        }

        .text_5 {
          line-height: 18rpx;
        }

        .text_6 {
          line-height: 20rpx;
        }

        .text_7 {
          line-height: 20rpx;
        }
      }

      .font_6 {
        font-size: 20rpx;
        font-family: PingFangSC;
        line-height: 19rpx;
        color: #011613;
      }

      .image {
        margin-left: 24rpx;
        margin-right: 15rpx;
        width: 644rpx;
        height: 287rpx;
      }
    }

    .section_5 {
      padding: 32rpx 20rpx 45rpx 24rpx;
      background-color: #ffffff;
      border-radius: 10rpx 10rpx 0 0;

      .group_4 {
        padding: 0 2rpx;

        .text_8 {
          line-height: 27rpx;
        }

        .font_7 {
          font-size: 22rpx;
          font-family: PingFangSC;
          line-height: 23rpx;
          color: #999999;
        }

        .text_9 {
          line-height: 21rpx;
        }

        .text_10 {
          line-height: 22rpx;
        }

        .text_11 {
          line-height: 22rpx;
        }
      }

      .view {
        margin-top: 39rpx;
      }

      .group_5 {
        padding: 28rpx 2rpx 21rpx;
        border-top: solid 3rpx #eeeeee;

        .pos {
          position: absolute;
          left: 2rpx;
          bottom: 21rpx;
        }

        .font_9 {
          font-size: 24rpx;
          font-family: PingFangSC;
          line-height: 19rpx;
          color: #00806b;
        }

        .pos_2 {
          position: absolute;
          right: 0;
          bottom: 19rpx;
        }

        .pos_5 {
          position: absolute;
          left: 2rpx;
          bottom: 21rpx;
        }

        .pos_6 {
          position: absolute;
          right: 0;
          bottom: 19rpx;
        }

        .image_2 {
          width: 9rpx;
          height: 22rpx;
        }

        .pos_9 {
          position: absolute;
          left: 2rpx;
          bottom: 21rpx;
        }

        .pos_10 {
          position: absolute;
          right: 0;
          bottom: 19rpx;
        }
      }

      .view_2 {
        margin-top: 12rpx;
      }

      .group_6 {
        padding: 28rpx 2rpx 19rpx;
        border-top: solid 3rpx #eeeeee;

        .pos_3 {
          position: absolute;
          left: 2rpx;
          bottom: 19rpx;
        }

        .pos_4 {
          position: absolute;
          right: 0;
          bottom: 18rpx;
        }
      }

      .font_8 {
        font-size: 24rpx;
        font-family: PingFangSC;
        line-height: 19rpx;
        color: #011613;
      }

      .group_7 {
        padding: 28rpx 2rpx 20rpx;
        border-top: solid 3rpx #eeeeee;

        .pos_7 {
          position: absolute;
          left: 2rpx;
          bottom: 20rpx;
        }

        .pos_8 {
          position: absolute;
          right: 0;
          bottom: 19rpx;
        }
      }

      .font_10 {
        font-size: 24rpx;
        font-family: PingFangSC;
        line-height: 19rpx;
        color: #b01431;
      }

      .image_3 {
        width: 9rpx;
        height: 21rpx;
      }

      .group_8 {
        padding: 28rpx 2rpx 22rpx;
        border-top: solid 3rpx #eeeeee;

        .pos_11 {
          position: absolute;
          left: 2rpx;
          top: 50%;
          transform: translateY(-50%);
        }

        .pos_12 {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }

    .section_4 {
      background-color: #00806b;
      width: 6rpx;
      height: 24rpx;
    }

    .font_5 {
      font-size: 28rpx;
      font-family: PingFangSC;
      line-height: 26rpx;
      color: #011613;
    }
  }

  .font {
    font-size: 28rpx;
    font-family: PingFangSC;
    line-height: 28rpx;
    color: #011613;
  }

  .font_2 {
    font-size: 24rpx;
    font-family: PingFangSC;
    line-height: 23rpx;
    color: #ffffff;
  }
}

.image_100 {
  width: 100%;
}
</style>